import React, { useState } from 'react';
import './Settings.css';

const Settings: React.FC = () => {
    const [activeTab, setActiveTab] = useState('general');
    const [settings, setSettings] = useState({
        siteName: '管理后台',
        siteDescription: '基于React的管理系统',
        adminEmail: 'admin@example.com',
        timezone: 'Asia/Shanghai',
        language: 'zh-CN',
        theme: 'light',
        notifications: {
            email: true,
            push: false,
            sms: false
        }
    });

    const tabs = [
        { id: 'general', label: '基本设置', icon: '⚙️' },
        { id: 'security', label: '安全设置', icon: '🔒' },
        { id: 'notifications', label: '通知设置', icon: '🔔' },
        { id: 'appearance', label: '外观设置', icon: '🎨' }
    ];

    const handleInputChange = (field: string, value: any) => {
        setSettings(prev => ({
            ...prev,
            [field]: value
        }));
    };

    const handleNestedChange = (parent: string, field: string, value: any) => {
        setSettings(prev => ({
            ...prev,
            [parent]: {
                ...prev[parent as keyof typeof prev],
                [field]: value
            }
        }));
    };

    const renderGeneralSettings = () => (
        <div className="settings-section">
            <div className="form-group">
                <label htmlFor="siteName">网站名称</label>
                <input
                    type="text"
                    id="siteName"
                    value={settings.siteName}
                    onChange={(e) => handleInputChange('siteName', e.target.value)}
                    className="form-input"
                />
            </div>

            <div className="form-group">
                <label htmlFor="siteDescription">网站描述</label>
                <textarea
                    id="siteDescription"
                    value={settings.siteDescription}
                    onChange={(e) => handleInputChange('siteDescription', e.target.value)}
                    className="form-textarea"
                    rows={3}
                />
            </div>

            <div className="form-group">
                <label htmlFor="adminEmail">管理员邮箱</label>
                <input
                    type="email"
                    id="adminEmail"
                    value={settings.adminEmail}
                    onChange={(e) => handleInputChange('adminEmail', e.target.value)}
                    className="form-input"
                />
            </div>

            <div className="form-row">
                <div className="form-group">
                    <label htmlFor="timezone">时区</label>
                    <select
                        id="timezone"
                        value={settings.timezone}
                        onChange={(e) => handleInputChange('timezone', e.target.value)}
                        className="form-select"
                    >
                        <option value="Asia/Shanghai">Asia/Shanghai</option>
                        <option value="UTC">UTC</option>
                        <option value="America/New_York">America/New_York</option>
                    </select>
                </div>

                <div className="form-group">
                    <label htmlFor="language">语言</label>
                    <select
                        id="language"
                        value={settings.language}
                        onChange={(e) => handleInputChange('language', e.target.value)}
                        className="form-select"
                    >
                        <option value="zh-CN">中文</option>
                        <option value="en-US">English</option>
                    </select>
                </div>
            </div>
        </div>
    );

    const renderSecuritySettings = () => (
        <div className="settings-section">
            <div className="form-group">
                <label>密码策略</label>
                <div className="checkbox-group">
                    <label className="checkbox-item">
                        <input type="checkbox" defaultChecked />
                        <span>要求强密码</span>
                    </label>
                    <label className="checkbox-item">
                        <input type="checkbox" defaultChecked />
                        <span>定期更换密码</span>
                    </label>
                    <label className="checkbox-item">
                        <input type="checkbox" />
                        <span>启用双因素认证</span>
                    </label>
                </div>
            </div>

            <div className="form-group">
                <label>登录安全</label>
                <div className="checkbox-group">
                    <label className="checkbox-item">
                        <input type="checkbox" defaultChecked />
                        <span>记录登录日志</span>
                    </label>
                    <label className="checkbox-item">
                        <input type="checkbox" />
                        <span>限制登录尝试次数</span>
                    </label>
                    <label className="checkbox-item">
                        <input type="checkbox" defaultChecked />
                        <span>会话超时自动退出</span>
                    </label>
                </div>
            </div>
        </div>
    );

    const renderNotificationSettings = () => (
        <div className="settings-section">
            <div className="form-group">
                <label>通知方式</label>
                <div className="checkbox-group">
                    <label className="checkbox-item">
                        <input
                            type="checkbox"
                            checked={settings.notifications.email}
                            onChange={(e) => handleNestedChange('notifications', 'email', e.target.checked)}
                        />
                        <span>邮件通知</span>
                    </label>
                    <label className="checkbox-item">
                        <input
                            type="checkbox"
                            checked={settings.notifications.push}
                            onChange={(e) => handleNestedChange('notifications', 'push', e.target.checked)}
                        />
                        <span>推送通知</span>
                    </label>
                    <label className="checkbox-item">
                        <input
                            type="checkbox"
                            checked={settings.notifications.sms}
                            onChange={(e) => handleNestedChange('notifications', 'sms', e.target.checked)}
                        />
                        <span>短信通知</span>
                    </label>
                </div>
            </div>
        </div>
    );

    const renderAppearanceSettings = () => (
        <div className="settings-section">
            <div className="form-group">
                <label htmlFor="theme">主题</label>
                <div className="theme-options">
                    <label className="theme-option">
                        <input
                            type="radio"
                            name="theme"
                            value="light"
                            checked={settings.theme === 'light'}
                            onChange={(e) => handleInputChange('theme', e.target.value)}
                        />
                        <div className="theme-preview light">
                            <span>浅色主题</span>
                        </div>
                    </label>
                    <label className="theme-option">
                        <input
                            type="radio"
                            name="theme"
                            value="dark"
                            checked={settings.theme === 'dark'}
                            onChange={(e) => handleInputChange('theme', e.target.value)}
                        />
                        <div className="theme-preview dark">
                            <span>深色主题</span>
                        </div>
                    </label>
                </div>
            </div>
        </div>
    );

    const renderTabContent = () => {
        switch (activeTab) {
            case 'general':
                return renderGeneralSettings();
            case 'security':
                return renderSecuritySettings();
            case 'notifications':
                return renderNotificationSettings();
            case 'appearance':
                return renderAppearanceSettings();
            default:
                return renderGeneralSettings();
        }
    };

    return (
        <div className="settings-page">
            <div className="page-header">
                <h1>系统设置</h1>
                <p>管理您的系统配置和偏好设置</p>
            </div>

            <div className="settings-container">
                <div className="settings-sidebar">
                    <nav className="settings-nav">
                        {tabs.map(tab => (
                            <button
                                key={tab.id}
                                className={`nav-tab ${activeTab === tab.id ? 'active' : ''}`}
                                onClick={() => setActiveTab(tab.id)}
                            >
                                <span className="nav-icon">{tab.icon}</span>
                                <span className="nav-label">{tab.label}</span>
                            </button>
                        ))}
                    </nav>
                </div>

                <div className="settings-content">
                    <div className="settings-form">
                        {renderTabContent()}

                        <div className="form-actions">
                            <button className="btn btn-primary">保存设置</button>
                            <button className="btn btn-secondary">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Settings;

